<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <link rel="stylesheet" href="../../static/BOSGeo/BOSGeo.css" />
  <title>加载模型</title>
  <style>
    html {
      font-size: 12px;
    }

    html,
    body,
    #mapContainer {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    .input-param {
        position: absolute;
        left: 20px;
        top: 20px;
        background: rgba(39, 21, 94, 0.8);
    }
    .map-input-group {
    padding: 6px 12px;
    }

    .map-input-group label {
        display: inline-block;
        min-width: 90px;
        color: #FFFFFF;
        font-size: 14px;
        vertical-align: middle;
    }

    .map-input-group input[type=text],
    .map-input-group input[type=number] {
        width: 120px;
        margin: 0;
        padding: 4px 6px;
    }
  </style>
</head>

<body>
  <div id="mapContainer"></div>
  <div class="input-param">
    <div class="map-input-group">
        <label for="modify-lng">经度：</label>
        <input type="number" min="-180" max="180" step="0.00001" id="modify-lng">
    </div>
    <div class="map-input-group">
        <label for="modify-lat">纬度：</label>
        <input type="number" min="-85" max="85" step="0.00001" id="modify-lat">
    </div>
    <div class="map-input-group">
        <label for="modify-height">高度：</label>
        <input type="number" min="-100" max="1000" step="0.2" id="modify-height">
    </div>
    <div class="map-input-group">
        <label for="modify-heading">角度(heading)：</label>
        <input type="number" min="-180" max="180" step="0.5" id="modify-heading">
    </div>
    <div class="map-input-group">
        <label for="modify-pitch">角度(pitch)：</label>
        <input type="number" min="-180" max="180" step="0.5" id="modify-pitch">
    </div>
    <div class="map-input-group">
        <label for="modify-roll">角度(roll)：</label>
        <input type="number" min="-180" max="180" step="0.5" id="modify-roll">
    </div>
    <div class="map-input-group">
        <label for="modify-size">大小：</label>
        <input type="number" step="1" id="modify-size">
    </div>
  </div>
  <script src="../../static/BOSGeo/BOSGeo.js"></script>
  <script>
    var map = new BOSGeo.Map('mapContainer', {
    mapType: BOSGeo.TDT_IMAGERY,
    attribute: false
    });

    var btnConfig = {
        home: false, // 是否显示初始化位置按钮
        shadows: false, // 是否显示阴影按钮
        roam: false, // 是否显示漫游按钮
        restore: false, // 是否显示默认状态按钮
        hide: false, // 是否显示隐藏按钮
        baseLayer: false, // 是否显示底图设置
        modelTree: false, // 是否显示模型树按钮
        attribute: false, // 是否显示属性按钮
        measurement: false, // 是否显示测距按钮
        movemodel: false, // 是否显示模型移动按钮
        clipping: false, // 是否显示裁切按钮
        screentshot: false, // 地图截图
        snow: false, // 雪
        rain: false, // 雨
        selfly: false, // 自身环绕
        autofly: false, // 绕点飞行
        draw: {
            polyline: false, // 画直线
            polygon: false,
            point: false,
            wall: false,
            circle: false,
            icon: false,
            cylinder: false,
            rectangle: false
        }
    };
    var mytool = new BOSGeo.Tool(btnConfig);

    // 模型移动
    mytool.modelOperation.activate();
    // mytool._modelOperation.destroy();
    var lng, lat, height, heading, pitch, roll, size, currentModel; // 当前模型

    map.on('modelmove', (data) => {
    if (data.type === 'left_down') {
        var newData = data.data
        lng = newData.lng;
        lat = newData.lat;
        height = newData.height;
        heading = newData.heading || 0;
        pitch = newData.pitch || 0;
        roll = newData.roll || 0;
        size = newData.size || 1;
        modifyLngEle.value = lng;
        modifyLatEle.value = lat;
        modifyHeightEle.value = height;
        modifyHeadingEle.value = heading;
        modifyPitchEle.value = pitch;
        modifyRollEle.value = roll;
        modifySizeEle.value = size;
    }else if (data.type === 'mouse_move') {
        var newData = data.data
        lng = newData.lng;
        lat = newData.lat;
        modifyLngEle.value = lng;
        modifyLatEle.value = lat;
    }
})
    // 获取图层管理类
    var layers = map.layers;
    // 设置收集模型的集合
    var modelCollection = new BOSGeo.LayerCollection({
    name: '模型集合',
    type: 'model'
    });
    // 将集合添加到图层管理中
    layers.add(modelCollection);

    var tiles = new BOSGeo.ModelLayer({
    name: '油罐4',
    type: '3dtiles',
    url: 'http://canyou.rickricks.com:8093/G1573638569291/tileset.json',
    position: [121.46517, 31.16734, 3],
    rotation: [0, 0, 0],
    enableCache: true,
    scale: 1,
    // onClick: layer => {
    //     layer.zoomTo();
    // },
    loaded: tileLoaded
    });
    modelCollection.add(tiles);
    function tileLoaded (tileset) {
        currentModel = tileset;
        // let axis = new BOSGeo.MeasureAxis({model: tileset, x: false, width: 1, alpha: 0.1});
        // axis.showAxis(); // 添加坐标轴
        // axis.showCube(); // 添加包围盒
        map.flyToEntity(tileset, {duration: 1.6});
    }

    var modifyLngEle = document.querySelector('#modify-lng');
    var modifyLatEle = document.querySelector('#modify-lat');
    var modifyHeightEle = document.querySelector('#modify-height');
    var modifyHeadingEle = document.querySelector('#modify-heading');
    var modifyPitchEle = document.querySelector('#modify-pitch');
    var modifyRollEle = document.querySelector('#modify-roll');
    var modifySizeEle = document.querySelector('#modify-size');

    modifyLngEle.addEventListener('input', function (e) {
    if (!currentModel) return;

    let lngStr = e.target.value;
    if (lngStr.length === 0) return;

    lng = parseFloat(lngStr);

    if (currentModel.featureType === 20) { // gltf
        BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
    } else if (currentModel.featureType === 21) { // tiles
        BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
    }
    }, false);

    modifyLatEle.addEventListener('input', function (e) {
        if (!currentModel) return;

        let latStr = e.target.value;
        if (latStr.length === 0) return;

        lat = parseFloat(latStr);

        if (currentModel.featureType === 20) {
            BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
        } else if (currentModel.featureType === 21) {
            // Utils.setTilesetMatrix(currentModel, [lng, lat, height, heading]);
            BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
        }
    }, false);

    modifyHeightEle.addEventListener('input', function (e) {
        if (!currentModel) return;

        let heightStr = e.target.value;
        if (heightStr.length === 0) return;

        height = parseFloat(heightStr);

        if (currentModel.featureType === 20) {
            BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
        } else if (currentModel.featureType === 21) {
            BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
        }
    }, false);

    modifyHeadingEle.addEventListener('input', function (e) {
        if (!currentModel) return;

        let headingStr = e.target.value;
        if (headingStr.length === 0) return;

        heading = parseFloat(headingStr);

        if (currentModel.featureType === 20) {
            BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
        } else if (currentModel.featureType === 21) {
            BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
        }
        currentModel.heading = heading; // 添加自定义属性
    }, false);

    modifyPitchEle.addEventListener('input', function (e) {
        if (!currentModel) return;

        let pitchStr = e.target.value;
        if (pitchStr.length === 0) return;

        pitch = parseFloat(pitchStr);

        if (currentModel.featureType === 20) {
            BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
        } else if (currentModel.featureType === 21) {
            BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
        }
        currentModel.pitch = pitch; // 添加自定义属性
    });

    modifyRollEle.addEventListener('input', function (e) {
        if (!currentModel) return;

        let rollStr = e.target.value;
        if (rollStr.length === 0) return;

        roll = parseFloat(rollStr);

        if (currentModel.featureType === 20) {
            BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
        } else if (currentModel.featureType === 21) {
            BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
        }
        currentModel.roll = roll; // 添加自定义属性
    });

    modifySizeEle.addEventListener('input', function (e) {
        if (!currentModel) return;

        let sizeStr = e.target.value;
        if (sizeStr.length === 0) return;

        size = parseFloat(sizeStr);

        if (currentModel.featureType === 20) {
            BOSGeo.GeoUtil.setGltfModelMatrix(currentModel, [lng, lat, height, heading]);
        } else if (currentModel.featureType === 21) {
            BOSGeo.GeoUtil.setTilesetMatrix(currentModel._root.transform, [lng, lat, height], [heading, pitch, roll], size);
        }
        currentModel.size = size; // 添加自定义属性
    });
  </script>
</body>

</html>